<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
            //全选按钮
        $(function () {
            //筛选标签，并创建对象集合
            var $demo=$("#id001");//选出id属性值为“id001”的标签对象集合
            //绑定点击事件
            $demo.click(function () {//给那个标签绑定点击事件的效果
                $("input[name='兴趣爱好']").prop("checked",true);
                //prop方法：可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等
            })
        })
            //全不选按钮
        $(function () {
            var $demo = $("#id002");
            $demo.click(function () {
                $(":checkbox[name='兴趣爱好']").prop("checked",false);
            })

        })
            //反选按钮
        $(function () {
            var $demo=$("#id003");
            $demo.click(function () {
                //方法一：
                $(":checkbox[name='兴趣爱好']").each(function () {
                    //在 each 遍历的 function 函数中，有一个 this 对象。这个 this 对象是当前正在遍历到的 dom 对象
                    this.checked=!this.checked;
                })

                //方法二：
                // var $demo1=$(":checkbox");
                // for (var i=0;i<$demo1.length;i++){
                //     if ($demo1[i].checked){
                //         $demo1[i].checked=false;
                //     }else{
                //         $demo1[i].checked=true;
                //     }
                // }

            //检查是否满选，全选/全不选
                //获取全部的兴趣爱好个数
                var num1=$(":checkbox[name='兴趣爱好']").length;
                //获取选中的兴趣爱好个数
                var num2=$(":checkbox[name='兴趣爱好']:checked").length;
                //根据num1与num2的值，判断是否为全选或者为非全选
                // if (num1==num2){
                //     $("#id004").prop("checked",true);
                // }else {
                //     $("#id004").prop("checked",false);
                // }

                //优化
                $("#id004").prop("checked",num1==num2);
            })
        })
            //提交按钮
        $(function () {
            $("#id005").click(function () {
                //获取选中的复选框
                $(":checkbox[name='兴趣爱好']:checked").each(function () {//遍历所有被选中的复选框对象
                    alert(this.value);//输出这个复选框对象的value值，若没有设置value值，就会输出on值
                })
            })
        })
            //给全选/全不选这个复选框绑定单击事件
            /**
             * 在function函数中：有一个this对象，这个 this 对象是当前正在响应事件的 dom 对象
             * （多个function函数嵌套时，这个this对象指向最近的一个function函数）
             *
             */
        $(function () {
            $("#id004").click(function () {
                $("input[name='兴趣爱好']").prop("checked",this.checked);
                //this.checked:   表示将当前对象的checked属性的值，赋给筛选器选中的标签对象checked属性（true或者false）
                //若不用this.checked方法，将不会出现：选中这个复选框，就出现全选效果;取消选中这个复选框，就全不选效果。
            })
        })
            //给全部兴趣爱好，绑上单击事件
        $(function () {
            $(":checkbox[name='兴趣爱好']").click(function () {
                //获取全部的兴趣爱好个数
                var num1=$(":checkbox[name='兴趣爱好']").length;
                //获取选中的兴趣爱好个数
                var num2=$(":checkbox[name='兴趣爱好']:checked").length;

                $("#id004").prop("checked",num1==num2);
            })
        })

    </script>
</head>
<body>
    兴趣爱好：<input type="checkbox" id="id004"/>全选/全不选<br/>
            <input type="checkbox" name="兴趣爱好" value="Java"/>Java
            <input type="checkbox" name="兴趣爱好" value="CPP"/>CPP
            <input type="checkbox" name="兴趣爱好" value="python"/>python
            <input type="checkbox" name="兴趣爱好" value="C语言"/>C语言
            <br/>
    <input type="button" id="id001" value="全选按钮"/>
    <input type="button" id="id002" value="全不选按钮"/>
    <input type="button" id="id003" value="反选按钮"/>
    <input type="button" id="id005" value="提交按钮"/>

</body>
</html>